<template>
  <div id="task-details">
    <div class="download-box">
      <div class="all-btn2">数据下载</div>
    </div>
    <div class="task-box">
      <!-- 任务信息 -->
      <div class="task-info">
        <div class="info-title">四川财经 - 金融学院 - 金融理财小组01</div>
        <div class="info-list">
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">参与人数</div>
          </div>
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">情景任务数量</div>
          </div>
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">平均分数</div>
          </div>
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">训练次数</div>
          </div>
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">考试次数</div>
          </div>
          <div>
            <div class="info-num">25/50</div>
            <div class="info-txt">完成率</div>
          </div>
        </div>
      </div>

      <!-- Echarts图 -->
      <div class="chart-box">
        <div class="chart-title">整体平均分数排名</div>
        <div class="chart-content">
          <div class="chart1" ref="chart1"></div>
          <div class="chart2" ref="chart2"></div>
        </div>
      </div>

      <!-- 情景任务列表 -->
      <div class="scroll-box">
        <div class="scroll-tabs">
          <span
            class="scroll-tab-item"
            @click="handleScrollTab(0)"
            :class="{ active: scrollTab === 0 }"
            >全部</span
          >
          <span
            class="scroll-tab-item"
            @click="handleScrollTab(1)"
            :class="{ active: scrollTab === 1 }"
            >金融营销</span
          >
          <span
            class="scroll-tab-item"
            @click="handleScrollTab(2)"
            :class="{ active: scrollTab === 2 }"
            >财税沟通</span
          >
          <span
            class="scroll-tab-item"
            @click="handleScrollTab(3)"
            :class="{ active: scrollTab === 3 }"
            >客服售后</span
          >
        </div>
        <el-carousel
          indicator-position="none"
          :autoplay="false"
          :loop="false"
          height="242px"
        >
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="scroll-list">
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b" @click="previewFn()">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
              <div>
                <div class="scroll-t">
                  <div class="scroll-img">
                    <img src="@/assets/img/TaskManagement/test.png" alt="" />
                  </div>
                  <div class="scroll-txt">全球市场震荡话题: 财富类保险营销</div>
                </div>
                <div class="scroll-b">
                  <el-icon style="margin-right: 4px">
                    <grid />
                  </el-icon>
                  预览
                </div>
              </div>
            </div>
            <!-- <h3>{{ item }}</h3> -->
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 培训人员排名 -->
      <div class="peixunContainer">
        <div class="peixun-title">培训人员排名</div>
        <div class="peixun-table">
          <el-table :data="peixunTableData" style="width: 100%">
            <el-table-column prop="index" label="排名" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="完成状态">
              <template #default="scope">
                <span
                  :class="scope.row.status === '已完成' ? 'green' : 'yellow'"
                >
                  {{ scope.row.status }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="trainNum" label="训练次数" />
            <el-table-column prop="grade" label="考试成绩" />
            <el-table-column prop="score" label="评分" />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="checkReport(scope.row)"
                  :style="{
                    color:
                      scope.row.status === '已完成' ? '#4f46e5' : '#9ea5b1',
                  }"
                >
                  <el-icon><List /></el-icon>
                  查看报告</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 预览二维码弹窗 -->
    <el-dialog
      v-model="isShowPreview"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="preview-content">
        <div class="preview-img"></div>
        <div class="preview-text">请扫描上方二维码</div>
        <div class="preview-text">在手机端体验</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  components: {},
  data() {
    return {
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {
        startTime: "",
        endTime: "",
        word: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      chart1Dom: null,
      chart2Dom: null,
      peixunTableData: [
        {
          index: 1,
          name: "张三",
          status: "已完成",
          trainNum: 10,
          grade: 90,
          score: 1,
        },
        {
          index: 2,
          name: "李四",
          status: "已完成",
          trainNum: 10,
          grade: 90,
          score: 1,
        },
        {
          index: 3,
          name: "王五",
          status: "已完成",
          trainNum: 10,
          grade: 90,
          score: 1,
        },
        {
          index: 4,
          name: "宋六",
          status: "已完成",
          trainNum: 10,
          grade: 90,
          score: 1,
        },
        {
          index: 5,
          name: "田七",
          status: "进行中",
          trainNum: 10,
          grade: 90,
          score: 1,
        },
      ],
      scrollTab: 0,
      isShowPreview: false, // 预览弹窗
    };
  },
  created() {
    // this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.initBarChart();
      this.initPieChart();
    });
  },
  beforeUnmount() {
    if (this.chart1Dom) {
      this.chart1Dom.dispose();
    }
    if (this.chart2Dom) {
      this.chart2Dom.dispose();
    }
  },
  methods: {
    handleScrollTab(index) {
      this.scrollTab = index;
    },
    handleDetail(row) {
      this.conversationId = row.id;
      this.isShowAI = true;
    },
    handleClose() {
      this.isShowAI = false;
    },
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
      console.log(currentPage, 333);
    },

    getList() {
      const url = "/dify/logs";
      const params = this.form;
      this.loading = true;
      this.$axios
        .get(url, {
          params, // 将参数传递给 `params` 属性
        })
        .then((response) => {
          const res = response;
          this.tableData = res.data;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 预览二维码弹窗
    previewFn() {
      this.isShowPreview = true;
    },

    // 柱状图
    initBarChart() {
      // 生成随机姓名和分数数据
      const names = ["张伟", "李明", "王芳", "张伟", "李明", "王芳", "张伟"];
      const scores = names.map(() => Math.floor(Math.random() * 11) * 10); // 生成0-100之间的10的倍数

      // 定义多种颜色
      const colors = ["#5B8FF9", "#5AD8A6", "#FF9845", "#FFDB5C", "#9270CA"];

      this.chart1Dom = echarts.init(this.$refs.chart1);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: names,
          axisLabel: {
            fontSize: 14,
            color: "#000000",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#E5E7EB",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            fontSize: 14,
            color: "#666",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#F0F0F0",
            },
          },
        },
        series: [
          {
            name: "分数",
            type: "bar",
            barWidth: "40%",
            data: scores.map((value, index) => ({
              value: value,
              itemStyle: {
                color: colors[index % colors.length],
              },
            })),
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              color: "#666",
              fontWeight: "bold",
            },
          },
        ],
      };
      this.chart1Dom.setOption(option);

      // 自适应窗口大小
      window.addEventListener("resize", () => {
        if (this.chart1Dom) {
          this.chart1Dom.resize();
        }
      });
    },

    // 饼图
    initPieChart() {
      // 随机生成优秀和欠佳的数据
      const excellentCount = Math.floor(Math.random() * 80) + 50; // 50-129
      const poorCount = Math.floor(Math.random() * 40) + 30; // 30-69

      // 判断哪个占比更高
      const centerText = excellentCount > poorCount ? "优秀" : "欠佳";

      this.chart2Dom = echarts.init(this.$refs.chart2);
      const option = {
        title: {
          text: centerText,
          left: "center",
          top: "35%",
          textStyle: {
            fontSize: 40,
            fontWeight: "bold",
            color: "#333",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          top: "5%",
          left: "center",
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        graphic: [
          {
            type: "text",
            left: "25%",
            top: "75%",
            style: {
              text: excellentCount,
              textAlign: "center",
              fill: "#587bf3",
              fontSize: 32,
              fontWeight: "bold",
            },
          },
          {
            type: "text",
            left: "25%",
            top: "85%",
            style: {
              text: "优秀次数",
              textAlign: "center",
              fill: "#374151",
              fontSize: 14,
            },
          },
          {
            type: "text",
            left: "65%",
            top: "75%",
            style: {
              text: poorCount,
              textAlign: "center",
              fill: "#b6d634",
              fontSize: 32,
              fontWeight: "bold",
            },
          },
          {
            type: "text",
            left: "65%",
            top: "85%",
            style: {
              text: "欠佳次数",
              textAlign: "center",
              fill: "#374151",
              fontSize: 14,
            },
          },
        ],
        series: [
          {
            name: "占比分布",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "42%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
              scale: true,
              scaleSize: 5,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: [
              {
                value: excellentCount,
                name: "优秀",
                itemStyle: {
                  color: "#587bf3",
                },
              },
              {
                value: poorCount,
                name: "欠佳",
                itemStyle: {
                  color: "#b6d634",
                },
              },
            ],
          },
        ],
      };
      this.chart2Dom.setOption(option);

      // 自适应窗口大小
      window.addEventListener("resize", () => {
        if (this.chart2Dom) {
          this.chart2Dom.resize();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#task-details {
  width: 1200px;
  margin: 0 auto;

  .download-box {
    text-align: right;
    margin-bottom: 20px;
  }

  .task-box {
    width: 1200px;
    background: #ffffff;
    box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 60px 40px;
    box-sizing: border-box;

    .task-info {
      .info-title {
        font-size: 24px;
        color: #0a0a0a;
        margin-bottom: 50px;
      }

      .info-list {
        display: flex;
        flex-wrap: wrap;
        gap: 35px;

        > div {
          width: 350px;
          height: 120px;
          background: #f9fafb;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .info-num {
            font-weight: bold;
            font-size: 30px;
            color: #4e45e5;
            margin-bottom: 20px;
          }

          .info-txt {
            font-size: 18px;
            color: #374151;
          }
        }
      }
    }

    .chart-box {
      margin: 50px 0;
      .chart-title {
        font-size: 18px;
        color: #374151;
        margin-bottom: 20px;
      }

      .chart-content {
        display: flex;
        gap: 40px;

        .chart1 {
          width: 700px;
          height: 440px;
        }

        .chart2 {
          width: 460px;
          height: 440px;
        }
      }
    }

    .scroll-box {
      height: 300px;
      .scroll-tabs {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        .scroll-tab-item {
          font-size: 14px;
          color: #252e54;
          cursor: pointer;
        }
        .scroll-tab-item.active {
          padding: 7px 10px;
          font-weight: bold;
          color: #5b57ab;
          background: #f0f2ff;
          border-radius: 6px;
          box-sizing: border-box;
        }
        .scroll-tab-item:hover {
          color: #5b57ab;
        }
      }
      .el-carousel-item {
        :deep(.el-carousel__arrow--left) {
          left: 0;
        }
        :deep(.el-carousel__arrow--right) {
          right: 0;
        }
      }

      :deep(.el-carousel__arrow) {
        background-color: rgba(0, 0, 0, 0.5);
      }

      .scroll-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;

        > div {
          width: calc(25% - 12px);
          height: 115px;
          background: #ffffff;
          border-radius: 20px;
          border: 2px solid #e3e5fb;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 17px;
          box-sizing: border-box;

          &:hover {
            border: 2px solid #4f46e5;
          }

          .scroll-t {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;

            .scroll-img {
              img {
                width: 60px;
                height: 60px;
              }
            }

            .scroll-txt {
              font-weight: bold;
              font-size: 17px;
              color: #374151;
              line-height: 27px;
            }
          }

          .scroll-b {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            color: #374151;
            &:hover {
              color: #4f46e5;
              cursor: pointer;
            }
          }
        }
      }
    }
    .peixunContainer {
      margin-top: 50px;
      .peixun-title {
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 16px;
        color: #374151;
      }
      .peixun-table {
        width: 100%;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #e3e5fb;
        .green {
          color: #31c969;
        }
        .yellow {
          color: #ebb819;
        }
      }
    }
  }

  .preview-content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .preview-img {
      width: 243px;
      height: 252px;
      background: url("../../assets/img/TaskManagement/preview-border.png")
        no-repeat center center;
      background-size: 100% 100%;
      margin-bottom: 25px;
    }
    .preview-text {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 18px;
      color: #111827;
    }
  }
}
</style>
